<template>
  <div class="divide">
    <avue-crud
      :data="storelist.fendata"
      :option="tableOption"
      @search-change="searchs"
      @search-reset="resetChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @selection-change="selectionch"
      v-model:page="page"
    >
      <template #menu-left="{}">
        <el-button
          type="primary"
          @click="addide"
          class="menubtns"
          color="#02A1E9"
          icon="el-icon-plus"
          >新增
        </el-button>
      </template>
      <template #status="scope">
        <el-tag v-if="scope.row.status === 0" size="small" type="danger"
          >禁用</el-tag
        >
        <el-tag v-else size="small">正常</el-tag>
      </template>
      <template #pic="scope">
        <img :src="scope.row.pic" alt="" />
      </template>
      <template #menu="{ row }">
        <el-button type="primary" icon="el-icon-edit" @click="onhandedit(row)"
          >编辑</el-button
        >

        <el-button type="danger" icon="el-icon-delete" @click="onhandelete(row.id)"
          >删除</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
      v-model="dialogVisible"
      :title="flag === true ? '新增' : '编辑'"
      width="700px"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="标签名称">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="1">正常</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="列表样式">
          <el-radio-group v-model="form.style">
            <el-radio label="0">一列一个</el-radio>
            <el-radio label="1">一列两个</el-radio>
            <el-radio label="2">一列三个</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input-number
            v-model="form.seq"
            :min="0"
            controls-position="right"
            size="large"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="comsomit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import request from "../../../../utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import { deldiv } from "../../../../api/bugs";
import { reactive, ref, inject } from "vue";
import { classlist } from "../../../../store/classlist";
import {get_fzulist,del_List} from '../../../../api/list'
import type { FormInstance, FormRules } from "element-plus";
import axios from "axios";

const reload = inject("reload");

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const flag = ref(false);
const dialogVisible = ref(false);
const formLabelWidth = "140px";

const page = ref({
  currentPage: 1, //当前页数
  pageSize: 10, //每页显示条目个数
  total: 0, //总条目数
});

let storelist = classlist();
const getlist = async (params: any) => {
  const res = await get_fzulist(params);
  storelist.fendata = res.data.records;
  page.value.total = res.data.total;
  page.value.pageSize = res.data.size;
  page.value.currentPage = res.data.current;
};
getlist({ size: page.value.pageSize, current: page.value.currentPage });

// 点击每页多少条
const sizeChange = (val: number) => {
  page.value.pageSize = val;
 getlist({size:val})
};
//点击页码
const currentChange = (val: number) => {
  page.value.currentPage = val;
  getlist({current:val})
};



const form = reactive({
  title: "", //标签名称
  style: "0", //样式
  status: "0", //状态
  seq: "", //排序
  id: "",
});

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "标签名称不能为空", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

// 删除
const onhandelete = (id: number) => {
    ElMessageBox.confirm("确定进行删除操作？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async => {
    del_List([id])
    getlist({})
     //@ts-ignore
     reload();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
  })
};



// 搜索
const searchs = (params: any, done: any) => {
  done();
  getlist(params);
  
};
// 清空
const resetChange = () => {
  getlist({});
};

//添加
const comsomit = () => {
  dialogVisible.value = false;
  if (flag.value) {
    const adddivide = (params: any) => {
      axios({
        method: "POST",
        url: "https://yami-admin-api.yiluxdeng.com/prod/prodTag",
        headers: {
          Authorization:
            "bYnuSGVqFRe4oN0FZQYqJt2J1zDl3/WUMiCu+Dl5ImVwdcmi0IvO59TiRpHVMP6w",
        },
        data: params,
      });
    };
    adddivide({ ...form });
    //@ts-ignore
    reload();
  } else {
    const editdata = (params: any) => {
      axios({
        method: "PUT",
        url: "https://yami-admin-api.yiluxdeng.com/prod/prodTag",
        headers: {
          Authorization:
            "bYnuSGVqFRe4oN0FZQYqJt2J1zDl3/WUMiCu+Dl5ImVwdcmi0IvO59TiRpHVMP6w",
        },
        data: params,
      });
    };
    editdata({ ...form });
  }
  dialogVisible.value = false;
 getlist({})
  //@ts-ignore
  reload();
};
// 编辑
const onhandedit = (row: any) => {
  dialogVisible.value = true;
  flag.value = false;
  form.title = row.title;
  form.seq = String(row.seq);
  form.style = row.style;
  form.status = String(row.status);
  form.id = row.id;
};

const addide = () => {
  dialogVisible.value = true;
  flag.value = true;
  (form.title = ""), (form.seq = ""), (form.style = ""), (form.status = "1");
};

const tableOption = {
  border: true,
  index: false,
  indexLabel: "序号",
  stripe: true,
  menuAlign: "center",
  menuWidth: 350,
  align: "center",
  refreshBtn: true,
  searchMenuSpan: 4,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  viewBtn: false,
  props: {
    label: "label",
    value: "value",
  },
  column: [
    {
      label: "序号",
      prop: "id",
      search: false,
    },
    {
      label: "标签名称",
      prop: "title",
      search: true,
    },
    {
      width: 150,
      label: "状态",
      prop: "status",
      search: true,
      slot: true,
      type: "select",
      dicData: [
        {
          label: "禁用",
          value: 0,
        },
        {
          label: "正常",
          value: 1,
        },
      ],
    },
    {
      label: "默认类型",
      prop: "style",
      search: false,
    },
    {
      label: "排序",
      prop: "seq",
      search: false,
    },
  ],
};


</script>
<style scoped>
.divide {
  width: 99%;
  height: 100%;
  background: #efefef;
  margin-left: 10px;
  margin-top: 5px;
}
.menubtns {
  margin-left: 20px;
}
</style>